<template>
	<div class="page planLibraryApply-page" data-page="planLibraryApply" style="z-index: 2;">
		<div class="link-page-nav">
			<a href="#" class="link" @click=$root.backToTab()>
				<i class="iconfont icon-zuo"></i>
			</a>
		</div>
		<div class="link-page-top" style="padding-bottom: 17px;">
			<div class="link-page-title" style="float: left;">应急预案</div>
			<div class="link-page-search">
				<div class="link-page-search-input" style="width: 48%;">
					<i class="iconfont icon-APPicon_sousuo1"></i>
					<input type="text" placeholder="搜一搜" id="dectorsearch-contantInfo">
				</div>
			</div>
			<a class="link popover-open" id="dec-search_yak" data-popover="#dector_menu_yak">
				<i class="iconfont icon-APPicon_shaixuan1
" id="active" style="font-size: 25px;"></i>
			</a>
		</div>
		<div class="page-content planLibraryApply-page-content">
			<div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="getMoreList"
				style="padding-top: 0px; z-index: 0;">
				<div class="list media-list sortable no-hairline-bottom" style="margin: 0px" id="check_list">
					<ul id="planlist_ul" style="padding: 0 20px;"></ul>
				</div>
				<div id="plan-preloader" style="display: none" class="preloader infinite-scroll-preloader"></div>
			</div>
		</div>
		<div class="popover select-option-con" id="dector_menu_yak">
			<div class="popover-angle"></div>
			<div class="popover-inner">
				<div class="list">
					<ul>
						<li><a href="" class="list-button item-link popover-close" id="dector_org_selsect">选择单位</a></li>
						<li><a href="" class="list-button item-link popover-close removeScreen select-active"
								@click="removeScreen">清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	return {
		data: function () {
			return {
				orgId: 0,
				planName: '',
				pageSize: 25,
				pageIndex: 0,
				isloadMore: true,
			}
		},
		methods: {
			getMoreList: function () {
				var self = this;
				if (self.isloadMore) {
					self.pageIndex++;
					self.selectEmergencyPlanInfo();
				}
			},
			clearsearch: function () {
				var self = this;			
				self.planName = '';
				$("#planlist_ul").empty();
				self.pageIndex = 0;
				self.selectEmergencyPlanInfo();
			},
			selectEmergencyPlanInfo: function () {
				var self = this;
				//筛选按钮有值变色
				if(jQuery("#dector_org_selsect")[0].innerText != "选择单位"){
					jQuery("#active").addClass("select-active");
				}else{
					jQuery("#active").removeClass("select-active");
				}
				common.loading(1);
				$("#planlist_ul").empty();
				var orgIds = userInfor.organizationIds;
				if (self.orgId) {
					orgIds = self.orgId;
				}
				Dao.selectEmergencyPlanInfo({
					userName: userInfor.accountName,
					deviceId: appKeyObj.deviceId,
					orgIds: orgIds,
					planName: self.planName,
					pageSize: self.pageSize,
					pageIndex: self.pageIndex,
				}, function (data) {
					common.loading(0);
					if (data && data.length > 0) {
						if (data.length == 25) { //有分页
							$("#plan-preloader").show();
							self.isloadMore = true;
						} else {
							$("#plan-preloader").hide();
							self.isloadMore = false;
						}
						for (var i = 0; i < data.length; i++) {
							var flowContent = encodeURIComponent(data[i].flowContent) ? encodeURIComponent(
								data[i].flowContent) : "-";
							var taskContent = encodeURIComponent(data[i].taskContent) ? encodeURIComponent(
								data[i].taskContent) : "-";
							$("#planlist_ul").append(`<li>
															<a href="/planLibraryDetails/` + data[i].id + `/` + flowContent + `/` + taskContent + `/" data-view=".view-main">
																	<div class="outInfo">
																			<div class="left">
																					<div class="inner2Info">` + common.transNullundefinedToline(data[i].name) + `</div>
																					<div class="inner5Info">` + common.transNullundefinedToline(data[i].levelName) + "&nbsp;&nbsp;&nbsp;&nbsp;" + common.transNullundefinedToline(data[i].typeName) + `</div>
																			</div>
																			<div class="right">
																					<img class="imgInfo" alt="" src="img/emptyImg/huoyann.png">
																			</div>
																	</div>
																	<div class="inner1Info">
																			<i class="iconfont icon-APPicon_dingwei"></i>` + common.transNullundefinedToline(data[i].orgName) + `
																	</div>
															</a>
													</li>`);
						}
					} else {
						self.isloadMore = false;
						$("#planlist_ul").empty();
						$("#plan-preloader").hide();
						if (self.pageIndex == 0) {
							$("#planlist_ul").append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div> `);
						}
					}
				}, function (e) {
					common.loading(0);
					app.methods.showToastBottom('获取预案信息列表失败');
				});
			},
			removeScreen: function () {
				var self = this;
				if (userInfor.isMuilUnitUser == 1) { //多
					self.selectOptionOrg = "";
					self.orgId = userInfor.organizationIds;
					jQuery("#dector_org_selsect").html("选择单位");
					jQuery("#dector_org_selsect").removeClass('select-active');
				}
				self.selectEmergencyPlanInfo();
			},
		},
		on: {
			pageInit: function (e, page) {
				var self = this;
				//搜索
				jQuery("#dectorsearch-contantInfo").keypress(function (e) {
					let name = jQuery("#dectorsearch-contantInfo").val();
					if (e.which == 13) {
						self.planName = name;
						$("#planlist_ul").empty();
						self.listIndex = 0;
						self.selectEmergencyPlanInfo();
					};
				});

				if (userInfor.isMuilUnitUser == 0) {
					//单联网单位
					$("#dec-search_yak").hide();
					self.orgId = userInfor.organizationIds;
					self.selectEmergencyPlanInfo();
				} else {
					if (currentUserUnitListData.length != 0) {
						if (self.currentOrgId == 0) {
							$("#plan-unit-select span").html(currentUserUnitListData[0].shortName);
							self.orgId = currentUserUnitListData[0].organizationId;
						}
						$("#planlist_ul").empty();
						self.pageIndex = 0;
						self.selectEmergencyPlanInfo();
					}
					//多联网单位
					$("#dec-search_yak").show();
				}

				//选择单位
				jQuery("#dector_org_selsect").click(function (e) {
					loadSelectUnitFunc(function (data) {
						//选中
						if (self.selectOptionOrg != data.orgId) {
							self.selectOptionOrg = data.orgId;
							self.orgId = data.orgId;
							jQuery("#dector_org_selsect").html(data.orgName);
							jQuery("#dector_org_selsect").addClass('select-active');
						} else {
							self.selectOptionOrg = "";
							self.orgId = userInfor.organizationIds;
							jQuery("#dector_org_selsect").html("选择单位");
							jQuery("#dector_org_selsect").removeClass('select-active');
						}
						self.selectEmergencyPlanInfo();
					}, self.selectOptionOrg);
				});
			},
		}
	}
</script>